<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>预约订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>宠物家政服务预约订单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="top-div">
      <span class="top-code">{{ detail.code }}</span>
      <span class="top-status">
        {{ detail.status.name }}
      </span>
    </div>
    <!-- 顶部信息栏 -->
    <el-card>
      <el-descriptions>
        <el-descriptions-item label="用户账号">{{
          detail.user_account
        }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">{{
          detail.booking_time
        }}</el-descriptions-item>
        <el-descriptions-item label="服务项目">{{
          detail.service_card_name
        }}</el-descriptions-item>
        <el-descriptions-item label="订单备注">{{
          detail.order_remark
        }}</el-descriptions-item>
        <el-descriptions-item label="用户手机号">{{
          detail.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="有效期">
          {{ detail.services.start_date }} ~ {{ detail.services.end_date }}
        </el-descriptions-item>
        <el-descriptions-item label="服务次数">
          {{
            detail.services.can_use_num +
            detail.services.using_num +
            detail.services.used_num
          }}
          , 剩余 {{ detail.services.can_use_num }} 次可用
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-row style="margin-top: 10px">
      <!-- <el-button
        class="theme-background-color"
        size="medium"
        @click="retention"
        v-if="detail.status == 11"
        >滞留</el-button
      > -->
      <el-button
        class="theme-background-color"
        size="medium"
        @click="dispatchDialogVisible = true"
        v-if="detail.status.id == 11"
        >派单</el-button
      >
      <el-button
        class="theme-background-color"
        size="medium"
        @click="returnVisitDialogVisible = true"
        v-if="
          detail.status.id == 40 ||
          detail.status.id == 61 ||
          detail.status.id == 60
        "
        >回访</el-button
      >
      <el-button
        size="medium"
        @click="serviceCompensationDialogVisible = true"
        v-if="
          detail.status.id == 12 ||
          detail.status.id == 13 ||
          detail.status.id == 20 ||
          detail.status.id == 40 ||
          detail.status.id == 61 ||
          detail.status.id == 62
        "
        >服务补偿</el-button
      >
      <!-- <el-button size="medium" @click="cancelOrder" v-show="detail.status.id == 11"
        >取消订单</el-button
      > -->
    </el-row>
    <!-- 卡片栏 -->
    <el-tabs type="border-card" v-model="activeName" class="main-tabs">
      <el-tab-pane label="订单信息" name="first">
        <!-- 订单信息卡片视图区域 -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>基本信息</span>
              </div>
              <el-descriptions>
                <el-descriptions-item label="创建类型">
                  {{ detail.create_type.name }}
                </el-descriptions-item>
                <el-descriptions-item label="联系人">
                  {{ detail.name }}
                </el-descriptions-item>
                <el-descriptions-item label="合作方单号">
                  -
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">
                  {{ detail.create_time }}
                </el-descriptions-item>
                <el-descriptions-item label="联系电话">
                  {{ detail.phone }}
                </el-descriptions-item>
                <el-descriptions-item label="同步结果">
                  -
                </el-descriptions-item>
                <el-descriptions-item label="是否分派">
                  -
                </el-descriptions-item>
                <el-descriptions-item label="所在地区">
                  {{ detail.user_province }}&nbsp;{{ detail.user_city }}&nbsp;{{
                    detail.user_area
                  }}
                </el-descriptions-item>
                <br />
                <el-descriptions-item label="分派人"> - </el-descriptions-item>
                <el-descriptions-item label="详细地址">
                  {{ detail.user_address }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            <!-- 服务信息卡片视图区域 -->
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>服务信息</span>
              </div>
              <el-descriptions>
                <el-descriptions-item label="服务形式">
                  <span v-if="detail.service_form == 1"> 到店 </span>
                  <span v-else> 到家 </span>
                </el-descriptions-item>
                <el-descriptions-item label="服务人员">{{
                  detail.service_staff_name
                }}</el-descriptions-item>
                <el-descriptions-item label="开始时间">{{
                  detail.service_start_time
                }}</el-descriptions-item>
                <el-descriptions-item label="服务产品">{{
                  detail.product_name
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{
                  detail.service_staff_phone
                }}</el-descriptions-item>
                <el-descriptions-item label="完成时间">{{
                  detail.service_end_time
                }}</el-descriptions-item>
                <el-descriptions-item label="服务凭证">
                  <span
                    v-for="item in detail.service_evidences"
                    :key="item.index"
                  >
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="item"
                      :preview-src-list="srcList"
                    >
                    </el-image>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="服务地址">{{
                  detail.service_addr
                }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="6" style="height: 100%">
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>客服备注</span>
                <div style="float: right">
                  <i class="el-icon-edit" @click="addPlatRemark"></i>
                </div>
              </div>
              <el-timeline style="overflow: auto">
                <el-timeline-item
                  v-for="(item, index) in detail.remark_log"
                  :key="index"
                  :timestamp="item.create_time"
                  placement="top"
                >
                  <el-row>
                    <el-col :span="14">{{ item.content }}</el-col>
                    <el-col :span="10">【{{ item.creator }}】</el-col>
                  </el-row>
                </el-timeline-item>
              </el-timeline>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <!-- 服务单卡片视图区域 -->
          <el-card>
            <div slot="header">
              <div class="green-reactangle"></div>
              <span>服务单</span>
            </div>
            <el-table
              :data="serviceListData"
              @row-click="clickTable"
              ref="refTable"
              border
              style="width: 100%"
            >
              <el-table-column prop="code" type="expand">
                <template slot-scope="props">
                  <el-form
                    label-position="left"
                    inline
                    class="demo-table-expand"
                  >
                    <el-card>
                      <el-descriptions>
                        <el-descriptions-item label="服务商订单号">
                          {{ props.row.provider_code }}
                        </el-descriptions-item>
                        <el-descriptions-item label="供应商产品">
                          {{ props.row.provider_product_name }}【{{
                            props.row.provider_product_id
                          }}】
                        </el-descriptions-item>
                        <el-descriptions-item label="服务价格">
                          {{ props.row.cost }}
                        </el-descriptions-item>
                        <el-descriptions-item label="服务人员">
                          {{ props.row.service_staff_name }}
                        </el-descriptions-item>
                        <el-descriptions-item label="开始服务时间">
                          {{ props.row.real_start_time }}
                        </el-descriptions-item>
                        <el-descriptions-item label="结算方式">
                          <span v-if="props.row.settle_type == 1"> 日结 </span>
                          <span v-if="detail.service_form == 2"> 周结 </span>
                          <span v-if="detail.service_form == 3"> 月结 </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="服务人员手机号">
                          {{ props.row.service_staff_phone }}
                        </el-descriptions-item>
                        <el-descriptions-item label="完成服务时间">
                          {{ props.row.finish_time }}
                        </el-descriptions-item>
                        <br />
                        <el-descriptions-item label="结算状态">
                          <span v-if="props.row.settle_status == 1">
                            待结算
                          </span>
                          <span v-if="props.row.settle_status == 2">
                            结算中
                          </span>
                          <span v-if="props.row.settle_status == 3">
                            已结算
                          </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="服务凭证">
                          <!-- <span v-for="item in props.row.evidences" :key="item.index">
                          <img :src="item" :alt="item.goodsName" style="width:50px;height:50px"/>
                        </span> -->
                          <span
                            v-for="item in props.row.evidences"
                            :key="item.index"
                          >
                            <el-image
                              style="width: 50px; height: 50px"
                              :src="item"
                              :preview-src-list="srcListT"
                            >
                            </el-image>
                          </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="服务地址">
                          {{ props.row.service_addr }}
                        </el-descriptions-item>
                        <el-descriptions-item label="结算时间">
                          {{ props.row.settle_time }}
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-card>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="服务单号" width="180">
              </el-table-column>
              <el-table-column
                prop="provider_product_name"
                label="派单服务产品【ID】"
                width="180"
              >
              </el-table-column>
              <el-table-column label="服务商【ID】">
                <template slot-scope="scope">
                  {{
                    scope.row.provider_full_name +
                    '【' +
                    scope.row.provider_id +
                    '】'
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="evidences_code" label="核销码">
              </el-table-column>
              <el-table-column prop="creator" label="派单人"> </el-table-column>
              <el-table-column prop="create_time" label="派单时间">
              </el-table-column>
              <el-table-column label="服务单状态">
                <template slot-scope="scope">
                  <!-- <div v-if="scope.row.status == 11">待派单</div>
                  <div v-if="scope.row.status == 12">已派单</div>
                  <div v-if="scope.row.status == 13">待服务</div>
                  <div v-if="scope.row.status == 20">服务中</div>
                  <div v-if="scope.row.status == 40">服务完成</div>
                  <div v-if="scope.row.status == 60">已取消</div>
                  <div v-if="scope.row.status == 61">回访中</div>
                  <div v-if="scope.row.status == 62">回访完成</div> -->
                  {{ scope.row.status.name }}
                </template>
              </el-table-column>
              <!-- <el-table-column prop="pay" label="服务方式">不知道</el-table-column> -->
              <el-table-column prop="order_remark" label="备注">
              </el-table-column>
              <el-table-column label="操作" width="100px" fixed="right">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    @click="cancelServiceOrder(scope.row.id)"
                    v-show="
                      scope.row.status.id == 11 ||
                      scope.row.status.id == 12 ||
                      scope.row.status.id == 13 ||
                      scope.row.status.id == 20
                    "
                  >
                    取消服务单
                  </el-link>
                  <br />
                  <el-link
                    type="primary"
                    @click="
                      orderReceivingNoticeDialogVisible = true
                      orderServiceId = scope.row.id
                    "
                    v-show="
                      scope.row.status.id == 12 && scope.row.docking_mode == 2
                    "
                  >
                    接单
                  </el-link>
                  <el-link
                    type="primary"
                    @click="
                      orderReceivingDialogVisible = true
                      orderServiceId = scope.row.id
                    "
                    v-show="scope.row.status.id == 13"
                  >
                    接单通知
                  </el-link>
                  &nbsp;
                  <el-link
                    type="primary"
                    @click="
                      startServiceDialogVisible = true
                      orderServiceId = scope.row.id
                    "
                    v-show="
                      scope.row.status.id == 13 && scope.row.docking_mode == 2
                    "
                  >
                    开始服务
                  </el-link>
                  &nbsp;
                  <el-link
                    type="primary"
                    @click="
                      completeServiceDialogVisible = true
                      orderServiceId = scope.row.id
                    "
                    v-show="scope.row.status.id == 20"
                  >
                    完成服务
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="回访记录" name="second">
        <!-- 回访记录卡片视图区域 -->
        <el-row>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in detail.return_visit_remark"
              :key="index"
              :timestamp="item.date + '【' + item.name + '】'"
              >{{ item.remark }}
            </el-timeline-item>
          </el-timeline>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="third">
        <!-- 操作记录卡片视图区域 -->
        <el-row>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in detail.action_log"
              :key="index"
              :timestamp="item.create_time + '【' + item.operator_name + '】'"
              >{{ item.content }}
            </el-timeline-item>
          </el-timeline>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 预约订单操作 -->
    <Dispatch
      :dispatchDialogVisible.sync="dispatchDialogVisible"
      :orderId="orderId"
      :productId="detail.product_id"
    ></Dispatch>
    <ReturnVisit
      :returnVisitDialogVisible.sync="returnVisitDialogVisible"
      :serviceProductName="detail.product_name"
      :serviceProductId="detail.product_id"
      :phone="detail.phone"
      :orderId="orderId"
    ></ReturnVisit>
    <ServiceCompensation
      :serviceCompensationDialogVisible.sync="serviceCompensationDialogVisible"
      :orderId="orderId"
    ></ServiceCompensation>
    <!-- 服务单操作 -->
    <OrderReceiving
      :orderReceivingNoticeDialogVisible.sync="
        orderReceivingNoticeDialogVisible
      "
      :orderServiceId="orderServiceId"
    ></OrderReceiving>
    <StartService
      :startServiceDialogVisible.sync="startServiceDialogVisible"
      :orderServiceId="orderServiceId"
    ></StartService>
    <CompleteService
      :completeServiceDialogVisible.sync="completeServiceDialogVisible"
      :orderServiceId="orderServiceId"
    ></CompleteService>

    <el-dialog
      title="接单通知"
      :visible.sync="orderReceivingDialogVisible"
      width="30%"
      center
    >
      <div>暂无模板</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderReceivingDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Dispatch from './Dispatch.vue'
import ReturnVisit from './ReturnVisit.vue'
import OrderReceiving from './OrderReceiving.vue'
import StartService from './StartService.vue'
import CompleteService from './CompleteService.vue'
import ServiceCompensation from './ServiceCompensation.vue'
export default {
  components: {
    Dispatch,
    ReturnVisit,
    OrderReceiving,
    StartService,
    CompleteService,
    ServiceCompensation
  },
  data() {
    return {
      // 服务信息-服务凭证图片
      srcList: [],
      // 服务单-服务凭证图片
      srcListT: [],

      detail: {
        services: {},
        product_name: '',
        product_id: 0,
        phone: ''
      },
      activeName: 'first',
      // 服务单表数据
      serviceListData: [],

      orderId: 0,
      // 控制派单弹窗的显示与隐藏
      dispatchDialogVisible: false,
      // 控制回访弹窗的显示与隐藏
      returnVisitDialogVisible: false,
      // 控制服务补偿弹窗的显示与隐藏
      serviceCompensationDialogVisible: false,

      orderServiceId: 0,
      // 控制接单通知弹窗的显示与隐藏
      orderReceivingNoticeDialogVisible: false,
      // 控制开始服务弹窗的显示与隐藏
      startServiceDialogVisible: false,
      // 控制完成服务弹窗的显示与隐藏
      completeServiceDialogVisible: false,
      // 控制接单通知弹窗的显示与隐藏
      orderReceivingDialogVisible: false
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    clickTable(row, index, e) {
      if (index.label != '操作') {
        this.$refs.refTable.toggleRowExpansion(row)
      }
      //调用,table的方法,展开/折叠 行
      this.srcListT = row.evidences
    },
    async getDetailData() {
      // 请求数据
      const { data: res } = await this.$http.post(
        '/admin/OrderBooking/listDetail',
        {
          id: this.$route.query.id
        }
      )
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      // 返回结果
      this.detail = res.data
      this.detail.services =
        this.detail.services == null ? {} : this.detail.services
      this.serviceListData = res.data.services_order
      this.srcList = res.data.service_evidences

      this.orderId = Number.parseInt(this.$route.query.id)
      // console.log(this.detail)
    },
    retention() {
      // 弹框询问是否下架商品
      this.$prompt('是否确认滞留该订单？', '订单滞留', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputPattern: /^(?!.{500}|^\s*$)/g,
        inputErrorMessage: '请输入滞留原因',
        closeOnClickModal: false
      })
        .then(async ({ value }) => {
          console.log(value)
          // const { data: res } = await this.$http.post(
          //   '/admin/order_goods/cancel',
          //   {
          //     id: this.orderId,
          //     reason: value
          //   }
          // )
          // if (res.meta.status !== 200) {
          //   return this.$message.error(res.meta.msg)
          // }
          this.$message.success('成功滞留')
          this.getDetailData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    cancelOrder() {
      // 弹框询问是否下架商品
      this.$prompt('是否确认取消该订单？取消后不可恢复', '取消订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputPattern: /^(?!.{500}|^\s*$)/g,
        inputErrorMessage: '请输入取消原因',
        closeOnClickModal: false
      })
        .then(async ({ value }) => {
          console.log(value)
          // const { data: res } = await this.$http.post(
          //   '/admin/order_goods/cancel',
          //   {
          //     id: this.orderId,
          //     reason: value
          //   }
          // )
          // if (res.meta.status !== 200) {
          //   return this.$message.error(res.meta.msg)
          // }
          this.$message.success('成功取消')
          this.getDetailData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    addPlatRemark() {
      this.$prompt('请输入备注', '添加备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(?!.{500}|^\s*$)/g,
        inputErrorMessage: '请输入备注'
      })
        .then(async ({ value }) => {
          const { data: res } = await this.$http.post(
            '/admin/orderBooking/addRemark',
            {
              id: this.orderId,
              remark: value,
              type: 2
            }
          )
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          }
          this.$message.success('添加成功')
          this.getDetailData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    // 取消服务单
    async cancelServiceOrder(id) {
      const { data: res } = await this.$http.post(
        'admin/OrderBooking/cancelSer',
        { id: id }
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.getDetailData()
      this.$message.success('取消服务单成功')
    }
  }
}
</script>

<style lang="less" scoped>
.el-col:nth-child(odd) .el-card {
  margin: 10px 0;
  height: auto;
}
.el-col:nth-child(even) .el-card {
  margin: 10px 0 20px 0;
  height: 100%;
}
.el-timeline {
  margin-left: -40px;
  width: 100%;
}
.top-div {
  margin: 10px 0px;
  .top-code {
    font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
    font-weight: 700;
    font-size: 16px;
  }
  .top-status {
    font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #009688;
    line-height: normal;
    margin-left: 30px;
  }
}
/deep/ .el-descriptions-item__label {
  color: #999;
}
.main-tabs {
  margin-top: 10px;
}
.green-reactangle {
  width: 1px;
  height: 10px;
  border: 1px solid #2ba79c;
  background-color: #2ba79c;
  display: inline-block;
  margin-right: 5px;
}
</style>
